<template>
  <div class="">
    <div id="redFingerPhone"  v-show="checkBox">
            <!--<div id="closeBoxCanvs"></div>-->
            <div v-drag="greet" id="closeBox" class="clearfix">
                <div class="fl f18" id="closeRedFinger" ></div>
                <p class="close fl f32" @click="this.closeBox"></p>
            </div>
        </div>
    <redfinger-js src="https://m.5173.com/js/redfinger.min.js"></redfinger-js>
  </div>
</template>
<script>
  
</script>
<script type="text/javascript" src="https://m.5173.com/js/redfinger.min.js"></script>
<script>
import Vue from "vue";
Vue.directive('drag',//自定义指令
    {
        bind: function(el, binding) {
            let oDiv = el;   //当前元素
            let self = this;  //上下文
            oDiv.addEventListener("touchstart", function(e) {
                //鼠标按下，计算当前元素距离可视区的距离
                let disX = e.changedTouches[0].clientX - oDiv.offsetLeft;
                let disY = e.changedTouches[0].clientY - oDiv.offsetTop;


                oDiv.addEventListener("touchmove", function(e) {
                    //通过事件委托，计算移动的距离
                    let l = e.changedTouches[0].clientX - disX;
                    let t = e.changedTouches[0].clientY - disY;
                    //判断边界
                    if (l <= 0) {
                        l = 0;
                    } else if (l >= window.innerWidth - oDiv.offsetWidth) {
                        l = window.innerWidth - oDiv.offsetWidth;
                    }
                    if (t <= 0) {
                        t = 0;
                    } else if (t >= window.innerHeight - oDiv.offsetHeight) {
                        t = window.innerHeight - oDiv.offsetHeight;
                    }
                    //移动当前元素
                    oDiv.style.left = l + 'px';
                    oDiv.style.top = t + 'px';
                    //将此时的位置传出去
                    binding.value({ x: e.pageX, y: e.pageY })
                })
                document.addEventListener("touchend", function(e) {
                    document.ontouchmove = null;
                    document.ontouchend = null;
                })
            })

        }
    }
);
export default {
  data(){
    return{
      val:'',
      checkBox:true,
    }
    
  },
  components: {
    "redfinger-js": {
      render(createElement) {
        return createElement("script", {
          attrs: { type: "text/javascript", src: this.src }
        });
      },

      props: {
        src: { type: String, required: true }
      }
    }
  },
  created() {
    
  },
  mounted(){
    this.delay()
    
  },
  methods: {
   redfingerParams:function(){
     
     console.log(redfinger)
   },
    delay(){
      var self= this
      setTimeout(function(){
      self.play1('VM010076216024','0','GZ-TEST-WEB-SOCKET-CONTROL-01','sandbox-5173.gc.com.cn','5902','680e24978a27454b8df2b71bebb9c8e6','1682')
      },2000)
        
    },
    greet(val) {
            this.val = val;
        },
    play1:function(padCode, resultCode, webControlCode, controlIp, controlPort, sessionId, userId) {
            var self = this;
            console.log("play")
            console.log("padCode", padCode);
            console.log("webControlCode", webControlCode);
            console.log("controlIp", controlIp);
            console.log("controlPort", controlPort);
            console.log("sessionId", sessionId);
            console.log("userId", userId);
            redfinger.config.protocol = 'wss';
            var configInfo = {
                "padCode": padCode,
                "resultCode": 0,
                "resultInfo": {
                    "webControlList": [
                        {
                            "webControlCode": webControlCode,
                            "webControlInfoList": [
                                {
                                    "controlIp": controlIp,
                                    "controlPort": controlPort
                                }
                            ]
                        }
                    ],
                    "sessionId": sessionId,
                    "userId": userId
                }
            };
            redfinger.play('redFingerPhone', redfinger.VIDEO_BITRATE_NORMAL, '', configInfo);
            redfinger.onOpen = function(code, result) {
                if (code == '196625' || code == '196627' || code == "196631" || code == '196613' || code == '196629') {
                    self.redfingerErrCode = code;
                    self.$http.jsonp(self.yyhServer+"/api/CloudVerification-cloudvalidate-service/rs/UserValFlow/user_vider_exception", {
                        params: {
                            validateId: self.validateId,
                            status: 1,
                            times: "1497941705",
                            sign: '505e770097ebebbd5dc8aa3b3ad447d4'
                        },
                        jsonp: 'callback'
                    }).then(
                        function(res) {
                            console.log(res.data.responseStatus + "message: 视频流异常异常回调成功");
                            redfinger.destory();
                            console.log("退到桌面")
                        })


                }
            };

            //          redfinger.onTimeOut=function(code)
            //          {
            //              if(code==2) {
            //                  window.setTimeout(redfinger.destory(),1000)
            //              }
            //          }
            this.redfingerParams()
        },
        closeBox() {
            var self = this;
            if(window.redfinger){
                window.setTimeout(redfinger.destory(), 1000)
            }

           
            self.checkBox = false;
            
        },
  }
};
</script>

<style scoped>
/* #closeBoxCanvs{
    position: absolute;
    top:0;
    left: 0;
} */

#lockBox {
  width: 100%;
  height: 100%;
}

#lockBox img {
  width: 100%;
}

#redFingerPhone {
  width: 100%;
  height: 100%;
  z-index: 2000;
  position: fixed;
}

#closeBox {
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 20%;
  background-image: url("../../assets/images/yyhclose.png");
  /*background: no-repeat;*/
  background-size: 1rem 1rem;
  transform: rotate(90deg);
}

#closeRedFinger {
  color: #fff;
  width: 100%;
  height: 0.62rem;
  line-height: 0.62rem;
  text-align: center;
}

.close {
  width: 100%;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  color: #fff;
}

.yun-post {
  height: auto;
  display: block;
  overflow: hidden;
}

.progress {
  width: 45%;
  margin: 0 auto;
  height: 0.25rem;
  background-color: #dedfe1;
  border-radius: 0.2rem;
  position: relative;
  border: 1px solid #c9cacc;
}

.progress,
.progress-striped .progress-bar,
.progress-bar-striped {
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-image: -o-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  -webkit-background-size: 0.4rem 0.4rem;
  background-size: 0.4rem 0.4rem;
}

.progress .progress-bar {
  animation: animate-positive 2s;
  position: absolute;
  top: 0;
  left: 0;
  height: 0.25rem;
  background-color: #00d2d8;
  border: 1px solid #00abb7;
  border-radius: 0.2rem;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition: width 0.6s ease;
  -o-transition: width 0.6s ease;
  transition: width 0.6s ease;
}

.progress span {
  position: absolute;
  right: -16%;
  height: 0.2rem;
  line-height: 0.2rem;
  font-size: 0.2rem;
  color: #481c00;
}

.progress .active {
  animation: reverse progress-bar-stripes 0.4s linear infinite,
    animate-positive 200s;
}

@-webkit-keyframes animate-positive {
  0% {
    width: 0%;
  }
}

@keyframes animate-positive {
  0% {
    width: 0%;
  }
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 0.4rem 0;
  }

  to {
    background-position: 0 0;
  }
}

@-o-keyframes progress-bar-stripes {
  from {
    background-position: 0.4rem 0;
  }

  to {
    background-position: 0 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 0.4rem 0;
  }

  to {
    background-position: 0 0;
  }
}
</style>
